<template lang='pug'>
    .select-box
        .select(@click.stop="changeSelect" 
                :class="{'text-selected': !isDefault}"
                :style="`border: 1px solid ${listShow ? themeColor : '#e4e7ed'};height: ${baseHeight};width: ${baseWidth}`")
                .text {{selectedText}}
                .icon
                     .iconfont.icon-xiajiantou(:class="{'reverse': listShow}")
        transition(enter-active-class="show-list" leave-active-class="hide-list")
            .list-box(v-show="listShow"
                      :style="{'top': baseHeight, 'width': baseWidth}")
                ul
                    li(v-for="item in listText" :key="item" 
                       @click.stop="liSelect(item)"
                       :style="`height: ${baseHeight};color: ${handleText(item) === selectedText ? themeColor : 'inherit'};`"
                       :class="{'li-active': item === selectedText}"
                       ref="liList"
                       ) {{handleText(item)}}
</template>

<script>
export default {
    name: 'SCSelect',
    props: {
        baseHeight: {
            type: String,
            default: '30px'
        },
        baseWidth: {
            type: String,
            default: '150px'
        },
        listText: {
            type: Array,
            default() {
                return [1, 2, 3, 4]
            }
        },
        showAttribute: {
            type: String,
            default: ''
        },
        themeColor: {
            type: String,
            default: 'red'
        }
    },
    data() {
        return {
            selectedText: '-请选择-',
            listShow: false
        }
    },
    computed: {
        isDefault() {
            if(this.selectedText === '-请选择-') {
                return true
            }
            return false
        },
        handleText() {
            return function(v) {
                if(!this.showAttribute) return v
                return v[this.showAttribute]
            }
        }
    },
    methods: {
        changeSelect() {
            this.listShow = !this.listShow
        },
        liSelect(v) {
            this.selectedText = this.handleText(v)
            this.listShow = false
        }
    },
    mounted() {
        document.addEventListener('click', e => {
            this.listShow = false
        })
    }
}
</script>

<style lang='less' scoped>
@import './base.css';

.select-box {
    position: relative;
    font-size: 14px;
    left: 100px;
    top: 40px;
    .select {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100px;
        border: 1px solid #e4e7ed;
        padding: 3px 5px 3px 10px;
        cursor: pointer;
        color: #b0b0b0;
        user-select: none;
        &.text-selected {
            color: #000;
        }
        .reverse {
            transform: rotate(-180deg);
        }
        .iconfont {
            font-size: 18px;
            transition: all .3s;
        }
    }
    .list-box {
        position: absolute;
        top: 40px;
        width: 100px;
        // border: 1px solid #e4e7ed;
        // border-top: none;
        padding: 5px 0;
        box-shadow: 0 1px 3px .5px rgb(212, 212, 212);
        ul {
            list-style: none;
            li {
                padding: 3px 10px;
                display: flex;
                align-items: center;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            li:hover {
                background-color: rgba(168, 169, 170, 0.1);
                cursor: pointer;
            }
        }
    }
}
.show-list {
    animation: heightShow .3s;
    transform-origin: 0 0;
}
.hide-list {
    animation: heightHide .3s;
    transform-origin: 0 0;
}
@keyframes heightShow {
    0% {
        transform: scaleY(0);
    }
    100% {
        transform: scaleY(1);
    }
}

@keyframes heightHide {
    0% {
        transform: scaleY(1);
    }
    100% {
        transform: scaleY(0);
    }
}
</style>